<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
	xmlns:fn="http://java.sun.com/jsp/jstl/functions">
<h:head>
	<title><ui:insert name="title">MyLog</ui:insert></title>
	<h:outputStylesheet library="css" name="style.css" />
</h:head>

<h:body>

	<div id="content">
		<div>What's on your mind?</div>
		<h:form id="form">
			<div id="addPanel">
				<p:inputTextarea rows="3" cols="100" counter="counter"
					maxlength="160" counterTemplate="{0} characters remaining."
					autoResize="false" id="logEntry" value="#{myLogBean.logEntry}">
					<p:ajax event="keyup" update="submitBttn" />
				</p:inputTextarea>
				<p:commandButton value="Submit" action="#{myLogBean.addLog}"
					update="form" id="submitBttn"
					disabled="#{myLogBean.isSubmitBttnDisabled()}" />
			</div>

			<div id="counterPanel">
				<h:outputText id="counter" />
			</div>


			<div id="itemsPanel">
				<p:dataTable id="logItems" var="logItem"
					value="#{myLogBean.getLogsList()}" paginator="true" rows="10">
					<p:column>
						<h:outputText value="#{logItem.entry}" />
					</p:column>
					<f:facet name="footer">
					In total there are #{fn:length(myLogBean.logsList)} logs.
				</f:facet>
				</p:dataTable>
			</div>
		</h:form>
	</div>


</h:body>
</html>